<template>
  <base-breadcrumb :breadcrumb="!isAudit">
    <template>
      <a-card>
        <TitleName title="信息详情" />
        <a-form :label-col="{ lg: { span: 6 }, sm: { span: 6 } }" :wrapper-col="{ lg: { span: 16 }, sm: { span: 16 } }">
          <a-row :gutter="24">
            <a-col :md="16" :sm="16">
              <a-form-item label="所属公司">
                {{ dataDetail.branchOffice + '/' + dataDetail.projectName}}
              </a-form-item>
            </a-col>
<!--            <a-col :md="8" :sm="8">-->
<!--              <a-form-item label="所属项目">-->
<!--                {{ dataDetail.projectName }}-->
<!--              </a-form-item>-->
<!--            </a-col>-->

            <a-col :md="8" :sm="8">
              <a-form-item label="竣工时间">
                {{ dataDetail.projectTime }}
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="竣备时间">
                {{ dataDetail.completeDate }}
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="填报人">
                {{ dataDetail.creatorName }}
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="填报时间">
                {{ dataDetail.createTime }}
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item label="竣工备案证扫描件">
                <file-link :file-list="dataDetail.completeFileInfoList" />
              </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
              <a-form-item label="其他">
                <file-link :file-list="dataDetail.reviewFileInfoVOList" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-card>
    </template>
    <!-- 表格 -->

    <a-card>
      <a-row :gutter="24">
        <a-col :md="4" :sm="4" class="col-center">
          <h3>竣工资料分类</h3>
          <a-radio-group style="width: 100%" default-value class="col-center" button-style="solid">
            <a-radio-button
              v-for="(item, index) in dataDetail.templateOne"
              :key="index"
              :value="index"
              style="width: 100%; text-align: center; margin-bottom: 20px"
              @click="getRightList(item.id)"
            >
              <Ellipsis tooltip :length="16" style="word-break: break-all">
                {{ item.name }}
              </Ellipsis>
            </a-radio-button>
          </a-radio-group>
        </a-col>
        <a-col :md="20" :sm="20" class="col-left">
          <a-col :md="20" :sm="20" class="col-left">
            <TitleName title="竣工资料清单" />
            <a-table
              style="width: 100%"
              :data-source="dataDetail.templateTwo"
              :columns="columns"
              bordered
              :pagination="false"
            >
              <span v-if="text != null" slot="isComplete" slot-scope="text">{{
                text && text != null ? '齐全' : '不齐全'
              }}</span>
            </a-table>
          </a-col>
        </a-col>
      </a-row>
    </a-card>

    <div class="tool-btns page-btn-right-top">
      <BasePrintButton v-if="dataDetail.auditStatus == 'PAST'" type="primary" :before-print-fn="print" />
      <a-button v-if="checkVisibleInDetail" class="ml12" type="primary" @click="handleClose">
        返回
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import Ellipsis from '@/components/Ellipsis'
import UploadList from '@/components/UploadList'
import TitleName from '@/components/TitleName/index.vue'
import { getDataDetail, getRightList, print } from '@/api/standingBook.js'
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
const columns = [
  {
    title: '资料名称',
    dataIndex: 'name'
  },
  {
    title: '保管期限',
    dataIndex: 'storageTerm'
  },
  {
    title: '资料份数',
    dataIndex: 'size'
  },
  {
    title: '是否齐全',
    dataIndex: 'isComplete',
    scopedSlots: { customRender: 'isComplete' }
  },
  {
    title: '保管起止时间',
    dataIndex: 'startDate'
  }
]
import Vue from 'vue'
import { checkVisibleInDetail } from '@/utils/util'
export default {
  name: 'a' + Date.now(),
  components: {
    TitleName,
    BasePrintButton,
    Ellipsis
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    }
  },
  data() {
    this.columns = columns

    return {
      checkVisibleInDetail: checkVisibleInDetail(this),
      token: '',
      dataDetail: []
    }
  },
  mounted() {
    this.token = Vue.getAcloudProvider().getAccessToken()
    // console.log(this.$route)
    this.id = this.$route.query.id
    this.getDataDetail()
  },
  methods: {
    print() {
      return print({ id: this.id }).then(res => {
        console.log(res)
        return res.data.content
      })
    },
    handleClose() {
      if (this.isAudit) {
        window.close()
      } else {
        this.$multiTab.close(this.$route.fullpath)
      }
      // this.$close()
    },
    check() {},
    getDataDetail() {
      let params = {
        id: this.id
      }
      getDataDetail(params).then(res => {
        this.dataDetail = res.data
        console.log(res)
      })
    },
    getRightList(id) {
      let params = {
        id: id
      }
      getRightList(params).then(res => {
        this.dataDetail.templateTwo = res.data
      })
    }
  }
}
</script>

<style scoped lang="less">
.col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.f-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.f-col .ant-form-item-label {
  text-align: left;
}
  /deep/ .ant-form-item .ant-form-item-label {
    height: 40px;
    line-height: 28px;
  }
</style>
